<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName"><br>
  名：<input type="text" v-model="person.lastName"><br>
  <span>全名：{{person.fullName}}</span>
  <h2>年龄：{{ person.age }}</h2>
  <hr>
  <slot name="slot1"></slot>
  <hr>
  <slot name="slot2"></slot>
</template>

<script>
import {ref, reactive, computed} from "vue";

export default {
  name: "Demo",
  props: ['msg', 'school'],
  emits:['hello'], // 用于注册VC的自定义事件，可不写，但会报警
  //region Vue2写法
  /*computed: {
    fullName() {
      return `${this.person.firstName}-${this.person.lastName}`;
    }
  },*/
  // endregion
  setup(props, context) {
    console.log(props);
    let person = reactive({
      firstName:'张',
      lastName:'三',
      age:18,
    });

    // computed简写，没有考虑计算属性被修改的情况
    /*person.fullName = computed(() => {
      return person.firstName + "-" + person.lastName;
    });*/

    // computed完整写法，考虑计算属性被修改的情况
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        let arr = value.split('-');
        person.firstName = arr[0];
        person.lastName = arr[1];
      }
    });

    return {
      person,
    }
  },
}
</script>

<style scoped>

</style>